import React from 'react';

import styles from './index.less';

const InfoBox = (props: { data: any }) => {
  const {
    data: {
      pictures,
      videos,
      picture_qps_max,
      picture_qps,
      video_qps_max,
      video_qps,
      structured_objects,
      filtered_objects,
    },
  } = props;

  const infoItems = [
    {
      title: '结构化统计（今日）',
      name: '图片',
      value: `${pictures} 张`,
    },
    {
      title: '',
      name: '视频',
      value: `${videos} 个`,
    },
    {
      title: '性能',
      name: '图片算法',
      value: `${picture_qps_max} 张/秒`,
    },
    {
      title: '',
      name: '图片实时',
      value: `${picture_qps} 张/秒`,
    },
    {
      title: '',
      name: '视频算法',
      value: `${video_qps_max} 路`,
    },
    {
      title: '',
      name: '视频实时',
      value: `${video_qps} 路`,
    },
    {
      title: '目标数量（今日）',
      name: '结构化后',
      value: `${structured_objects} 个`,
    },
    {
      title: '',
      name: '质量过滤后',
      value: `${filtered_objects} 个`,
    },
  ];

  return (
    <div style={{ paddingLeft: 20, paddingRight: 20 }}>
      <table className={styles.table}>
        <tbody>
          {infoItems.map(items => (
            <tr key={items.name}>
              <td>{items.title}</td>
              <td>{items.name}</td>
              <td>{items.value}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default InfoBox;
